<template>
  <div v-show="$store.state.design.whatTool === 2" class="toolbox">
    <div class="tooltop">Choose A File To Upload</div>
    <div class="toolboxmain">
      <div class="upload-box ovtext">
        <div class="bgi" />
        <input
          :disabled="uploadState"
          type="file"
          name="upimg"
          @change="uploadImg"
        >
      </div>
      <div class="uploadpicturebox">
        <div v-show="uploadState" class="one-picture-box">
          <img class="one-picture" src="/static/image/loading2.gif" alt="img">
        </div>
        <div
          v-for="(item, ind) in usesImgArr"
          :key="item.id"
          class="one-picture-box"
        >
          <img
            class="one-picture"
            :src="item.img_100"
            alt="img"
            style="display:none;"
            @load="loadingImage"
          >
          <img class="one-picture" src="/static/image/loading2.gif" alt="img">
          <div class="one-picture-shade">
            <img
              v-show="!$store.state.design.imageTimes[item.id]"
              class="delbtn"
              src="/static/image/shanchu.svg"
              alt="shanchu"
              @click="delPic(item.id, ind)"
            >
            <span class="addbtn" @click="addImg(item.id, item.img)">add</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  components: {},
  data() {
    return {
      usesImgArr: [],
      uploadState: false
    };
  },
  created() {
    // 获取用户上传图
    // $.ajax({
    //   context: this,
    //   url: resourceUrl.getImage,
    //   success: function(res) {
    //     var data = JSON.parse(res),
    //       i = 0,
    //       len = data.length;
    //     var obj = null;
    //     for (i; i < len; i++) {
    //       obj = {};
    //       obj.id = data[i].id;
    //       obj.img = globalData.base1 + data[i].img.replace(".", "_800.");
    //       obj.img_100 = globalData.base1 + data[i].img.replace(".", "_100.");
    //       this.usesImgArr.unshift(obj);
    //     }
    //   }
    // });
  },
  mounted() {},
  methods: {
    uploadImg(e) {
      console.log('e');
      console.log(e);
      var that = this;
      var myFiles = e.target.files[0];
      var arr = myFiles.type.trim().split('/');
      console.log('myFiles');
      console.log(myFiles);
      console.log('arr');
      console.log(arr);
      if (!myFiles) return;
      if (
        arr[0] !== 'image' ||
        (arr[1] !== 'jpg' &&
          arr[1] !== 'jpeg' &&
          arr[1] !== 'png' &&
          arr[1] !== 'pneg' &&
          arr[1] !== 'svg+xml')
      ) {
        e.target.value = '';
        alert('Format must be jpg jpeg png pneg svg');
        return;
      }
      if (myFiles.size > 10 * 1024 * 1024) {
        // 10M
        alert('The image size is greater than 10M');
        e.target.value = '';
        return;
      }
      // var myFormData = new FormData();
      // myFormData.append("upimg", myFiles);
      that.uploadState = true;
      var reader = new FileReader();
      reader.readAsDataURL(myFiles);
      reader.onload = function(e) {
        // 图片base64化
        var newUrl = this.result; // 图片路径
        const obj = {};
        obj.id = 0;
        obj.img = newUrl;
        obj.img_100 = newUrl;
        that.usesImgArr.unshift(obj);
        console.log(that.uploadState);
        that.uploadState = false;
        console.log(that.uploadState);
      };
    },
    delPic(id, i) {
      // $.ajax({
      //   context: this,
      //   url: resourceUrl.deleteImage + id,
      //   success: function(res) {
      //     var data = JSON.parse(res);
      //     if (data.code === 0) {
      //       this.usesImgArr.splice(i, 1);
      //     } else {
      //       alert("Delete failed,please try again");
      //     }
      //   }
      // });
    },
    addImg(id, src) {
      svgTool.addImg(src, id, 'none');
    },
    loadingImage(e) {
      e.target.style.display = 'block';
      $(e.target)
        .siblings('.one-picture')
        .remove();
    }
  }
};
</script>
<style lang="scss" scoped>
.toolbox {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: #fff;
    overflow: auto;
}
.one-picture-shade{
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.5);
}

.one-picture-box{
  float: left;
  margin: 17px 0 0 17px;
  width: 88px;
  height: 80px;
  border: 1px solid rgb(240, 236, 238);
  position: relative;
  cursor: pointer;
}

.one-picture-box:hover .one-picture-shade{
  display: block;
}

.addbtn{
  position: absolute;
  width: 50px;
  height: 24px;
  line-height: 24px;
  color: #fff;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%,-50%);
          transform: translate(-50%,-50%);
  text-align: center;
  background-color: #339;
}
.one-picture{
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%,-50%);
          transform: translate(-50%,-50%);
  max-width: 96%;
  max-height: 96%;
}
.toolboxmain{
  height: calc(100% - 55px);
  overflow: auto;
}
.tooltop{
  padding-top: 5px;
  height: 50px;
  line-height: 50px;
  text-indent: 20px;
  font-weight: 700;
}
.ovtext{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.upload-box {
  position: relative;
  height: 58px;
  width: 398px;
  margin: 0 auto 30px;
  border: 1px solid #dbd9da;
}
.bgi {
  width: 119px;
  height: 58px;
  position: absolute;
  top: 0;
  left: 140px;
  background-image: url('/static/image/sprite2.png');
  background-position-x: -140px;
  background-position-y: 0;
}
.upload-box input {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}
.upload-box:hover .bgi {
  background-position-y: -60px;
  border-color: #339;
}
.uploadpicturebox {
  height: calc(100% - 90px);
  overflow: auto;
}
.delbtn {
  position: absolute;
  right: -8px;
  top: -8px;
  width: 20px;
  height: 20px;
}
</style>

// WEBPACK FOOTER // // src/components/picture-box.vue
